<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body, div, ul, li, p, span, img{
        margin: 0;
        padding: 0;
    }
    body{
      font-family: core, "Avenir Next", "Helvetica Neue", Helvetica, Arial, "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi MicroHei", sans-serif;
    }
    li{
      list-style: none;
    }
    img{
      width: 100%;
    }
    .box{
      background: #f8f8f8;
    }
    .leftBigImg{
        /*float: left;*/
        /*width: 300px;*/
        /*height: 350px;*/
        /*border: solid red 1px;*/
        /*background: red;*/
    }
    .bigImgList{
        /*border: 1px solid red;*/
    }
    .bigImgList li{
        display: none;
        overflow: hidden;
        /*height: 350px;*/
    }
    .rightTabList{
        /*width: 400px;*/
        /*float: left;*/
        /*height: 350px;*/
        /*border: 1px solid f8f8f8;*/
    }
    .tabHead{
        /*background: powderblue;*/
    }
    .tabHead li{
        display: inline-block;
        /*border: 1px solid red;*/
        /*width: 45px;*/
        text-align: center;
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        opacity: .3;
        /*margin: 7px;*/
        margin-top: 20px;
        margin-left: 5%;
        transition: opacity .5s;
    }
    .tabHead li:hover{
      opacity: 1;
    }
    .active{
        background: #f8f8f8;
        /*color: #fff;*/
        opacity: 1 !important;
    }
    .tabContent li{
        display: none;
        /*height: 330px;*/
        /*border: 1px solid red;*/
    }
    .tabContent li h3{
      line-height: 36px;
      font-family: "Microsoft Yahei";
    }
    .tabContent li h3 span{
      font-size: 14px;
      color: #666666;
      margin-left: 10px;
    }
    .tabContent li p{
      margin-top: 18px;
      padding-top: 24px;
      border-top: 1px solid #e5e5e5;
      font-size: 16px;
      color: #333;
      line-height: 28px;
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <div class="box container">
    <div class="row">
      <div class="leftBigImg col-lg-4 col-sm-4">
        <ul class="bigImgList">
          <li style="display: block">
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
          <li>
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
          <li>
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
          <li>
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
          <li>
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
          <li>
            <img src="./img/zhoumi.jpg" alt="周密">
          </li>
        </ul>
      </div>
      <div class="rightTabList col-lg-8 col-sm-8">
        <ul class="tabHead">
          <li class="active">
            <img src="./img/liuhongwei.jpg" alt="刘宏伟">
          </li>
          <li>
            <img src="./img/wangwei.jpg" alt="汪威">
          </li>
          <li>
            <img src="./img/tianbo.jpg" alt="田波">
          </li>
          <li>
            <img src="./img/lixingbo.jpg" alt="李兴波">
          </li>
          <li>
            <img src="./img/wp-content-themes-Earthshaker-1-images-case-xvhua.jpg" alt="徐华">
          </li>
          <li>
            <img src="./img/ruanyongli.jpg" alt="阮永丽">
          </li>
        </ul>
        <ul class="tabContent">
          <li style="display: block">
            <h3>
              刘宏伟
              <span>Camera360 副总裁</span>
            </h3>
            <p>
              七牛在图像存储方面做了很多贴心服务，不仅解决了大规模存储问题， 也解决了移动互联网对照片浏览和计算的特殊需求。合作过程中，我们也从七牛研发团队里吸取到了前沿的研发流程。
            </p>
          </li>
          
          <li>
            <h3>
              汪威
              <span>咸蛋家 CTO</span>
            </h3>
            <p>
              七牛为咸蛋家提供了整套的解决方案，在手机直播竞争激烈的当下，七牛提供的稳定、高效、可信赖的底层服务，使咸蛋家开发人员能集中精力开展业务逻辑方面的工作，也给咸蛋家赢得了时间和更好的行业领先地位。
            </p>
          </li>
          <li>
              <h3>
                田波
                <span>中兴家庭网络运营总监</span>
              </h3>
              <p>
                 中兴智能家居产品依托七牛云服务，向用户提供音视频云存储、检索、分享等衍生增值服务，七牛的专业团队为海量数据的安全性及稳定性提供了有力保障。
              </p>
          </li>
          <li>
            <h3>
              李兴波
              <span>海康威视萤石云平台技术总监</span>
            </h3>
            <p>
               在和七牛合作的这几年中，深刻的感受到七牛的的确确是一家做“云服务”的公司。作为技术产品服务供应商，在技术和服务品质上有一贯的追求是七牛的核心竞争力，同时在七牛的各个方面都同时体现着另种竞争力——对服务的理解。这就是除技术和产品等硬性表现外，赢的合作伙伴信任更为重要的基础。
            </p>
          </li>
          <li>
            <h3>
              徐华
              <span>沪江网副总裁</span>
            </h3>
            <p>
               七牛为沪江提供了稳定高可用的云端文件大规模存储服务，很好地帮助企业降低了运营成本，提高了响应速度。我们相信，伴随着互联网教育的快速发展，沪江和七牛会有更多深入的合作，让我们能更专注于在线教育用户的核心需求。
            </p>
          </li>
          <li>
            <h3>
              阮永丽
              <span>美图秀秀 CTO</span>
            </h3>
            <p>
               美图有幸见证七牛这一路策马扬鞭的茁壮成长，其可靠云服务亦令美图的发展如虎添翼。回顾走过的历程，七牛攀登的路途上，每个足印都记录着技术的飞跃，每个里程碑都带给我们新的体验。
            </p>
          </li>
        
        </ul>
      </div>
    </div>
  </div>
  <script src="js/scripts.js"></script>
</body>
</html>